import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {List} from 'immutable';

import {Row, Col, InputNumber, Button} from 'antd';
import QmIcon from 'components/QmIcon';

import noop from 'util/noop';

@Relax
export default class Cart extends Component {
    static defaultProps = {
        chooseGoods: List(),
        deleteChooseGoods: noop,
        changeNum: noop
    }


    componentDidMount() {
        window.resize = ()=>{
            $('.cart-goods-list').css({height: (window.innerHeight - 252 - 40 - 45 - 10 + 'px')});
        }
    }


    render() {
        const {chooseGoods} = this.props;
        const height = window.innerHeight - 252 - 40 - 45 - 10;

        let total = this.calculateTotal();


        return (
            <div className="virtual-cart">
                <div className="cart-goods-list" style={{height: `${height}px`}}>
                    {
                        chooseGoods.isEmpty() ? <div className="t-center t-grayer pushtt">您暂未选择任何商品~</div> : null
                    }
                    {
                        chooseGoods.map((goods, index)=>{
                            return (
                                <Row key={index} className="goods-item">
                                    <Col span={24}>{goods.get('title')}</Col>
                                    <Col span={24}></Col>
                                    <Col span={12}>
                                        <span className="t-red">&yen;{goods.get('salePrice')}</span>
                                    </Col>
                                    <Col span={12}>
                                        <InputNumber min={1}
                                                     max={goods.getIn(['stock', 'stock'])}
                                                     value={goods.get('itemAmount')}
                                                     onChange={(num)=>this.changeNum(index, num)}/>
                                        <a href="javascript:void(0);" onClick={()=>this.deleteGoods(index)}><QmIcon type="delete"/></a>
                                    </Col>
                                </Row>
                            )
                        })
                    }
                </div>
                <div className="cart-goods-foot">
                    <ul>
                        <li className="pull-left">已选：{total.totalCount || 0}件</li>
                        <li>合计（不含运费）：<span className="t-red">&yen;{(total.totalPrice || 0).toFixed(2)}</span></li>
                    </ul>
                </div>
            </div>
        )
    }


    /**
     * 计算总值
     * @returns {*}
     */
    calculateTotal() {
        const {chooseGoods} = this.props;
        let totalCount = 0;
        let totalPrice = 0;

        return chooseGoods.reduce((total, goods)=>{
            let itemAmount = goods.get('itemAmount');

            total.totalCount += (itemAmount || 0);
            total.totalPrice += (itemAmount || 0) * goods.get('salePrice');

            return total;
        }, {totalPrice, totalCount});
    }


    /**
     * 删除商品
     * @param index
     */
    deleteGoods(index) {
        this.props.deleteChooseGoods(index);
    }


    /**
     * 修改数量
     */
    changeNum(index, num) {

        this.props.changeNum(index, parseInt((num || 1), 10));
    }
}